<template>
    <div class="box">
        <div class="logo">
            <img width="180rem" height="180rem" src="../../img/咔瓦学考.png" />
        </div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" />
            </van-cell-group>
            <div class="wangji">忘记密码</div>
            <div style="margin: 16px">
                <van-button :disabled="btnFlag" round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
        <span class="register">没有账号？<span class="zc" @click="tozc">立即注册</span></span>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import type { Ref } from "vue";
import { login } from "@/api/login";
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from "vue-router";

const router = useRouter()

// 存储手机号
const username: Ref<string> = ref("");
// 存储密码
const password: Ref<string> = ref("");

// 登录事件
async function onSubmit() {
    const { data } = await login({
        username: username.value,
        password: password.value,
    })
    // console.log(data);
    if (data.code !== 200) {
        // 提示登录失败
        return showFailToast(data.message);
    }

    // 提醒用户 登录 通过
    showSuccessToast(data.message);
    window.localStorage.setItem("token", data.data.token); // 存储token
    router.push('/')
}

// 根据输入框的内容, 控制按钮能否点击
const btnFlag = computed(() => {
    return !(username.value !== "" && password.value !== "")
});

function tozc() {
    router.push("/register")
}


</script>

<style scoped >
.box {
    height: 100%;
}

img {
    margin: 70px 97px 20px;
}

.wangji {
    color: #f71818;
    margin-left: 290px;
    margin-top: 15px;
    font-size: 14px;
}

span {
    margin: 4px auto;
    font-size: 16px;
}

.zc {
    color: #61affd;
}
</style>